import { defineStore } from "pinia";
import { reactive, computed } from "vue";
//引入其他仓库
import { useCounterStore } from "./useCounterStore.js";

//组合api
export const useListStore = defineStore(
  "list",
  () => {
    const counterStore = useCounterStore(); //必须放在defineStore里面
    //创建仓库数据，类似于state
    const list = reactive({
      items: [
        { text: "学习", isCompleted: true },
        { text: "吃饭", isCompleted: false },
        { text: "睡觉", isCompleted: true },
      ],
      counter: 100,
    });

    //完全使用computed来做getters
    const doubleCount = computed(() => {
      return list.counter * 2;
    });

    // 接下来我们再来创建一个 getter，该 getter 使用的是其他仓库的数据
    const otherCounter = computed(() => {
      return counterStore.doubleCount * 3;
    });

    //方法
    function addItem(newItem) {
      list.items.push({
        text: newItem,
        isCompleted: false,
      });
    }

    function completeHandle(index) {
      list.items[index].isCompleted = !list.items[index].isCompleted;
    }

    function deleteItem(index) {
      list.items.splice(index, 1);
    }

    return {
      list,
      addItem,
      completeHandle,
      deleteItem,
      doubleCount,
      otherCounter,
    };
  },
  {
    persist: true,
  }
);
